<template>
  <div class="gray">
    <search><p class="title">分类详情</p></search>
    <div class="box" v-html="list.content"></div>
    <div class="list">
      <p>专题推荐</p>
      <div v-for="item in recommendList" :key="item.id" class="content">
        <img :src="item.scene_pic_url" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import search from "@/components/search";
import { topic } from "@/api/home/index.js";
export default {
  data() {
    return {
      list: [],
      recommendList: [],
    };
  },
  methods: {
    init() {
      var id = this.$route.query.id;
      topic({ id: id }).then((res) => {
        console.log(res);
        this.list = res.data.data;
        this.recommendList = res.data.recommendList;
      });
    }
  },
  created() {
    this.init();
  },
  components: {
    search,
  },
};
</script>

<style scoped lang="scss">
html{
    background-color: rgb(244, 244, 244);
}
.gray {
  background-color: rgb(244, 244, 244);
  height: 100%;
}
p {
  margin: 0;
}
.box {
  width: 100%;
  ::v-deep img {
    width: 100%;
    display: block;
  }
}
.list {
  padding: 0 15px;
  padding-bottom:15px;
  p {
    padding: 15px;
    margin: 15px;
    color: #999;
    font-size: 0.4rem;
  }
  .content {
    background-color: #fff;
    padding: 12px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    ::v-deep img {
      width: 100%;
      display: block;
      height: 140px;
    }
    p {
      margin: 15px;
      padding: 0;
      text-align: left;
      color: #000;
      font-size: 0.37333rem;
    }
  }
  .content:last-child{
      margin-bottom: 0px;
  }
}
</style>